<template>
  <div class="dashboard-editor-container">

    <panel-group
      ref="panelGroup"
      :countList="countList"
      @handleSetLineChartData="handleSetLineChartData" />

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart ref="lineChart" :chart-data="lineChartData" />
    </el-row>

    <el-row :gutter="32">

      <el-col :span="12">
        <div class="chart-wrapper">
          <pie-chart ref="ActionChart" />
        </div>
      </el-col>
      <el-col :span="12">
        <div class="chart-wrapper">
          <raddar-chart ref="raddarChart" />
        </div>
      </el-col>
    </el-row>


  </div>
</template>

<script>
import PanelGroup from '@/views/warning/controllerData/component/PanelGroup.vue'
import LineChart from '@/views/warning/controllerData/component/LineChart.vue'
import PieChart from "@/views/warning/controllerData/component/PieChart.vue";
import RaddarChart from '@/views/warning/controllerData/component/RaddarChart.vue'
import { getWarningCount } from '@/api/home/home-api'

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    PieChart,
    RaddarChart
  },
  data() {
    return {
      lineChartData: {},
      countList: [],
      actionOutputWayDict: [],
      actionTypeList: {}, // 动作数据
      ruleList: {}, // 规则数据
    }
  },
  async mounted() {
    this.actionOutputWayDict = this.$store.state.dict.dictDatas.action_output_way
    await getWarningCount().then(res => {
      const data = res.data
      console.log("进行输出--------",data.useCountMap.conditions)
      // 数量统计
      this.countList.ruleCount = data.ruleCount
      this.countList.actionCount = data.actionCount
      this.countList.configCount = data.configCount
      this.countList.recordCount = data.recordCount
      this.countList.configEnableCount = data.configEnableCount
      this.countList.configDisableCount = data.configDisableCount
      // 七天内告警数
      this.lineChartData.timeData = data.timeList
      this.lineChartData.actualData = data.warningCountList
      this.countList.actionType = data.actionType
      this.ruleList=[
        {
          "value":data.useCountMap.conditions,
          "name":"条件",
        },
        {
          "value":data.useCountMap.timing,
          "name":"定时",
        },
        {
          "value":data.useCountMap.manualOperation,
          "name":"手动",
        },
      ]
    })
    this.actionTypeList.dataList = this.countList.actionType.map(item => {
      return {
        value: item.actionCount,
        name: this.actionOutputWayDict.find(item2 => item2.value == item.outputWay)?.label
      }
    }).sort((a, b) => b.value - a.value)
    this.actionTypeList.nameList = this.actionTypeList.dataList.map(item => item.name)

    this.$refs.panelGroup.init(this.countList)
    this.$refs.lineChart.initChart(this.lineChartData)
    this.$refs.ActionChart.initChart(this.actionTypeList)
    console.log("进行输出--------",this.ruleList)
    this.$refs.raddarChart.initChart(this.ruleList)
  },
  methods: {
    handleSetLineChartData(type) {
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
